<template>
<div class="t1">
<el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    border
    lazy
    :load="load"
    :header-cell-style="{
		'background-color': '#169098',
	    'color': '#fff',
	}"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <!-- <el-table-column
      label="头像"
      width="180">
      	<template  slot-scope="scope">
      		<img :src="scope.row.headimg" width="24" height="24" />
      	</template>
    </el-table-column> -->

    <el-table-column
      prop="nickname"
      label="昵称"
      show-overflow-tooltip
      width="180">
    </el-table-column>
    <el-table-column
      prop="real_name"
      label="真实姓名"
      align="center"
      width="100">
    </el-table-column>
    <el-table-column
      prop="mobile"
      label="电话"
      align="center"
      width="130">
    </el-table-column>
    

    <el-table-column
      prop="apply_total_num"
      label="总数量"
      align="center"
      width="100">
    </el-table-column>

    <el-table-column
      prop="apply_receive_num"
      label="已领取"
      align="center"
      width="100">
    </el-table-column>

    <el-table-column
      prop="apply_surplus_num"
      label="剩余数量"
      align="center"
      width="100">
    </el-table-column>

    <el-table-column
      prop="company"
      label="企业"
      align="center"
      show-overflow-tooltip
      >
    </el-table-column>
  </el-table>
</div>
</template>

<script>


export default {
	
	name : 'ticket',
	
	data () {
		return {
			tableData : [],
		// tableData: [{
  //         id: 1,
  //         date: '2016-05-02',
  //         name: '王小虎',
  //         address: '上海市普陀区金沙江路 1518 弄'
  //       }, {
  //         id: 2,
  //         date: '2016-05-04',
  //         name: '王小虎',
  //         address: '上海市普陀区金沙江路 1517 弄'
  //       }, {
  //         id: 3,
  //         date: '2016-05-01',
  //         name: '王小虎',
  //         address: '上海市普陀区金沙江路 1519 弄',
  //         children: [{
  //             id: 31,
  //             date: '2016-05-01',
  //             name: '王小虎',
  //             address: '上海市普陀区金沙江路 1519 弄'
  //           }, {
  //             id: 32,
  //             date: '2016-05-01',
  //             name: '王小虎',
  //             address: '上海市普陀区金沙江路 1519 弄'
  //         }]
  //       }, {
  //         id: 4,
  //         date: '2016-05-03',
  //         name: '王小虎',
  //         address: '上海市普陀区金沙江路 1516 弄'
  //       }],
		  	defaultProps : {
		  		//label : 'nickname',
		  	}
		}
	},

	props : {

	},

	components : {
		
	},

	computed : {

	},

	methods : {
		init () {
			this.$http({
				fun : 't2',
				cb : res => {
					

					res.forEach(item => {
						item['hasChildren'] = true;
					})

					console.log(res);

					// const result = this.$util.transData(res, 'wxuid', 'pwxuid', 'children');

					// console.log(result);

					this.tableData = res;

					console.log('ok');
				}
			})

		},

		handleNodeClick () {


		},

		load (tree, treeNode, resolve) {

			console.log(tree);
			console.log(treeNode);

			this.$http({
				fun : 't3',
				pwxuid : tree.wxuid,
				cb : res => {
					console.log('t3');
					console.log(res);

					res.forEach(item => {
						item['hasChildren'] = true;
					})
					resolve(res);

				}
			});

		},
	},

	watch : {
	    
	},

	mounted () {
		this.init();
	},

}
</script>

<style scoped>
.t1 {
	padding: 20px;
	background:rgba(8,55,73,1);
}

.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
